<template>
  <!--用户相关弹框 嵌套到NavMenu里去-->
  <div>
    <div v-if="!userInfo" class="login-container">
      <router-link to="/" class="login-link">
        登录
      </router-link>
    </div>
    <div v-else class="user-bar-container">
      <div class="user-dropdown">
        <el-dropdown :show-timeout=10 :hide-timeout=10
                     placement="right"
                     trigger="click"
                     @command="handleCommand">
          <!--用户信息弹窗开关 下拉菜单-->
          <div class="avatar-container">
            <img v-if="userInfo.avatar" class="avatar-image"
                 :src="imageBaseUrl + userInfo.avatar" alt="用户头像">
            <img v-else class="avatar-image"
                 src="../../assets/images/avatar.png" alt="默认头像">
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command=1>我的资料</el-dropdown-item>
            <el-dropdown-item command=2>修改密码</el-dropdown-item>
            <el-dropdown-item command=3 divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="user-role-info">
          <span class="user-college">{{userInfo.college ? userInfo.college.name : '未知学院'}}</span>
          <span class="user-role">[{{userInfo.roleName || '用户'}}]</span>
        </div>
      </div>


      <!--个人信息弹窗-->
      <el-dialog
              :visible="userInfoDialogVisible"
              :before-close="handleClose"
              :center="true"
              width="500px"
              top="10vh"
              :show-close="false">
        <div class="user-info-container">
          <div class="avatar-upload-container">
            <!--上传图片-->
            <el-upload
                    class="avatar-upload"
                    :action="userAvatarUploadUrl + '?token=' + $store.getters.token"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
              <img v-if="userInfo.avatar" :src="imageBaseUrl + userInfo.avatar"
                   style="width: 80px; height: 80px; border-radius: 50%"
                   alt="用户头像">
              <div v-else class="avatar-upload-placeholder">点击上传头像</div>
            </el-upload>
          </div>
          <div class="user-info-details">
            <div class="user-info-item">
              <span class="user-info-label">用户名:</span>
              <span class="user-info-value">{{userInfo.username}}</span>
            </div>
            <div class="user-info-item">
              <span class="user-info-label">性别:</span>
              <span class="user-info-value">{{userInfo.sex == 1 ? '男' : '女'}}</span>
            </div>
            <div class="user-info-item">
              <span class="user-info-label">手机:</span>
              <span class="user-info-value">{{userInfo.phone || '未设置'}}</span>
            </div>
            <div class="user-info-item">
              <span class="user-info-label">邮箱:</span>
              <span class="user-info-value">{{userInfo.email || '未设置'}}</span>
            </div>
          </div>
          <div class="dialog-footer">
            <el-button @click="handleClose">关闭</el-button>
          </div>
        </div>
      </el-dialog>

      <!--修改密码弹窗-->
      <el-dialog :visible.sync="updatePasswordDialogVisible" width="400px" title="修改密码">
        <div class="password-form-container">
          <el-form ref="elForm" :model="updatePasswordForm" :rules="updatePasswordFormRules" size="medium"
                  label-width="100px">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="updatePasswordForm.oldPassword" type="password" placeholder="请输入旧密码" :maxlength="18"
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="updatePasswordForm.newPassword" type="password" placeholder="请输入新密码" :maxlength="18"
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleUpdatePassword">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {getUserInfo, updatePassword} from "../../api/AuthController";

  export default {
    data() {
      return {
        userInfo: {},
        userInfoDialogVisible: false,
        updatePasswordDialogVisible: false,

        //修改密码
        updatePasswordForm: {
          oldPassword: '',
          newPassword: '',
        },
        updatePasswordFormRules: {
          oldPassword: [{required: true, pattern: /^\d{6,18}$/, message: "密码格式不正确", trigger: "blur"}],
          newPassword: [{required: true, pattern: /^\d{6,18}$/, message: "密码格式不正确", trigger: "blur"}]
        },
        // 上传用户头像的url
        userAvatarUploadUrl: process.env.BASE_URL + "/auth/avatar",
        // 商品图片的基础路径
        imageBaseUrl: process.env.BASE_URL + "/static/image/"

      };
    },
    mounted() {
      this.userInfo = this.$store.getters.userInfo;
    },
    methods: {
      handleClose() {
        this.userInfoDialogVisible = false
        this.updatePasswordDialogVisible = false
      },
      /*下拉菜单处理*/
      handleCommand(command) {
        console.log(command)
        if (command == 1)
          this.userInfoDialogVisible = true
        else if (command == 2)
          this.updatePasswordDialogVisible = true
        else if (command == 3)
          this.logout()
      },
      logout() { //退出登录
        this.$store.dispatch("logout");
      },
      //修改密码
      handleUpdatePassword() {
        this.updatePasswordDialogVisible = false
        const oldPassword = this.updatePasswordForm.oldPassword
        const newPassword = this.updatePasswordForm.newPassword
        updatePassword(oldPassword, newPassword).then(result => {
          this.$notify.success("密码修改成功")
        })
      },
      // 上传用户头像
      handleAvatarSuccess() {
        this.$notify.success("上传成功")
        getUserInfo().then(result => {
          this.userInfo = result.data
          this.$store.commit("setUserInfo", this.userInfo); // 重新拉取用户信息
        })
      },
      // 上传用户头像前的处理
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt1M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt1M;
      },
    }
  };
</script>

<style scoped>
  /* UserBar Container Styling */
  .user-bar-container {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .user-bar-container:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  /* User Avatar Styling */
  .avatar-container {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .avatar-container:hover {
    transform: scale(1.05);
  }

  .avatar-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
  }

  .user-role-info {
    color: #606266;
    margin-left: 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }

  .user-college {
    font-weight: 600;
    margin-bottom: 2px;
  }

  .user-role {
    opacity: 0.8;
  }

  /* User dropdown styling */
  .user-dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
  }

  /* Dialog Styling */
  .dialog-content {
    padding: 20px;
  }

  .user-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .avatar-upload-container {
    margin-bottom: 20px;
    position: relative;
  }

  .avatar-upload {
    cursor: pointer;
    position: relative;
  }

  .avatar-upload img {
    transition: filter 0.3s;
  }

  .avatar-upload:hover img {
    filter: brightness(0.9);
  }

  .avatar-upload-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px dashed #dcdfe6;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .avatar-upload-placeholder:hover {
    border-color: #409EFF;
    color: #409EFF;
    background-color: rgba(64, 158, 255, 0.05);
  }

  .user-info-details {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }

  .user-info-item {
    display: flex;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
  }

  .user-info-label {
    font-weight: 600;
    color: #606266;
    width: 80px;
  }

  .user-info-value {
    color: #303133;
    flex: 1;
  }

  /* Password Dialog */
  .password-form-container {
    padding: 10px 0;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 10px;
  }

  /* Login Link */
  .login-link {
    text-decoration: none;
    color: #409EFF;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .login-link:hover {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409EFF;
  }
</style>


